<script lang="ts" setup>
    import {ref} from "vue";

    let name=ref("Vue3New,");
    let num3=ref(3);
    function numAdd3(){
        num3.value+=3;
    }

    let imgs=ref("../../public/img.webp");
    function changeImg(){
        if(imgs.value==="../../public/img.webp"){
            imgs.value="../../public/img2.webp"
        }else{
            imgs.value="../../public/img.webp"
        }
    }

    let isBd=ref(true);
</script>

<template>
  <h2>{{name}}{{ num3 }}</h2>
  <button @click="numAdd3">点击+3</button><br>
  <hr>

  <!-- v-bind(简写":"),v-on(简写"@") -->
  <img :src=imgs alt="img"><br>
  <button @click="changeImg">切换图片</button>
  <hr>
  <!-- <div :class="{div1: true,div2:true}">嘻嘻哈哈</div> -->
  <div :class="{div1: isBd,div2:isBd}">苏总听做梦都想成为hxd对象</div>
</template>

<style scoped>
    img{
        width: 100px;
        height: 100px;
    }
    .div1{
        border: 1px solid darkkhaki;
        height: 200px;
        text-align: center;
        font-size: 32px;
        line-height: 200px;
    }
    .div2{
        background-color: antiquewhite;
    }
</style>